<%--
  Created by IntelliJ IDEA.
  User: 小威
  Date: 2020/6/1
  Time: 20:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../layui/layui.all.js"></script>
    <script src="../jquery/jquery-3.4.1.js"></script>

    <style>
        /*下拉列表默认显示*/
        .layui-form-select dl { max-height:190px; }
    </style>
</head>
<body>
<div class="layui-container" style="border: solid 5px;border-color: #3F91FF">

    <div style="text-align: center;margin-top: 30px">
        <p style="font-size: xx-large">发布新内容</p>
    </div>

    <form class="layui-form" action="javascript:void(0);" enctype="" method="post" style="margin-top: 30px">
    <%--<input type="text" name="userName" value="${user.userName}">--%>



    <div class="layui-form-item">
        <label class="layui-form-label">帖子标题</label>
        <div class="layui-input-block">
            <input type="text" name="postName" lay-verify="title" autocomplete="off" placeholder="请输入帖子的标题" class="layui-input" id="postName">
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 40px">
        <label class="layui-form-label">帖子类型</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required" lay-filter="type" id="category" name="category">
                <!--<option value=""></option>-->
                <%--<option value="0">北京</option>--%>
                <%--<option value="1">上海</option>--%>
                <%--<option value="2">广州</option>--%>
                <%--<option value="3">深圳</option>--%>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="margin-top: 40px;margin-bottom: 40px">
        <label class="layui-form-label">封面图</label>
        <div class="layui-input-block">
                        <input type="file" name="photo"  id="photo" value="请选择上传的文件"/>

        <%--            <div class="layui-upload">--%>
<%--                <button type="button" class="layui-btn" id="photo">上传图片</button>--%>
<%--                <div class="layui-upload-list">--%>
<%--                    <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">--%>
<%--                    <p id="demoText"></p>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <input type="file" name="photo"  id="photo" value="请选择上传的文件"/>--%>
        </div>
    </div>

<%--        <script>--%>
<%--            layui.use('upload', function() {--%>
<%--                var $ = layui.jquery--%>
<%--                    , upload = layui.upload;--%>
<%--                //普通图片上传--%>
<%--                var uploadInst = upload.render({--%>
<%--                    elem: '#photo'--%>
<%--                    ,url: 'https://httpbin.org/post' //改成您自己的上传接口--%>
<%--                    ,before: function(obj){--%>
<%--                        //预读本地文件示例，不支持ie8--%>
<%--                        obj.preview(function(index, file, result){--%>
<%--                            $('#demo1').attr('src', result); //图片链接（base64）--%>
<%--                        });--%>
<%--                    }--%>
<%--                    ,done: function(res){--%>
<%--                        //如果上传失败--%>
<%--                        if(res.code > 0){--%>
<%--                            return layer.msg('上传失败');--%>
<%--                        }--%>
<%--                        //上传成功--%>
<%--                    }--%>
<%--                    ,error: function(){--%>
<%--                        //演示失败状态，并实现重传--%>
<%--                        var demoText = $('#demoText');--%>
<%--                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');--%>
<%--                        demoText.find('.demo-reload').on('click', function(){--%>
<%--                            uploadInst.upload();--%>
<%--                        });--%>
<%--                    }--%>
<%--                });--%>

<%--            })--%>
<%--        </script>--%>

    <%--<div class="layui-form-item layui-form-text">--%>
        <%--<label class="layui-form-label">帖子内容</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<textarea placeholder="请输入内容" class="layui-textarea" style="width: 90%;height: 500px" name="postContent" id="postContent"></textarea>--%>
        <%--</div>--%>
    <%--</div>--%>
        <%--<div style="line-height: 500px"></div>--%>
        <div style="text-align: center;margin-bottom: 10px"><p style="font-size: x-large">帖子详情</p></div>

        <div id="div1">
            <p>请书写帖子具体内容</p>
            <%--<p>欢迎使用 wangEditor 富文本编辑器</p>--%>
        </div>

        <textarea id="text1" style="width:100%; height:100%;display: none;" ></textarea>

        <%--<button id="btn1">获取html</button>--%>
        <%--<button id="btn2">获取text</button>--%>


        <script>
            $.ajax({
                url:"/forum/post/selectAllBrandName",
                success:function (data) {
                    var html = "<option value=\"0\"></option>";
                    for (var i = 0; i < data.length; i++){
                       html = html + "<option value=\"" + data[i].brandName + "\">";
                       html = html + data[i].brandName + "</option>";
                    }
                    console.log(html);
                    $('#category').html(html)

                    // 解决外部的jquery 和 layui 自带的jquery冲突无法展示下拉列表
                    // 重新渲染一下select列表框
                    layui.use('form', function(){
                        var form = layui.form;
                        form.render('select');
                    });
                }

            })
        </script>
        <script>


            // layui.on('select(type)',function (data) {
            //     category = data.value;
            //     type = data.elem[data.elem.selectedIndex].text;
            //     console.log(type)
            //     form.render('select')
            // })
        </script>
        <script type="text/javascript" src="wangEditor.js"></script>
        <script type="text/javascript">
            var E = window.wangEditor
            var editor = new E('#div1')
            var $text1 = $('#text1')
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
            }
            //开启debug模式
            editor.customConfig.debug = true;
            // 关闭粘贴内容中的样式
            editor.customConfig.pasteFilterStyle = false
            // 忽略粘贴内容中的图片
            editor.customConfig.pasteIgnoreImg = true
            // 上传图片到服务器
            editor.customConfig.uploadFileName = 'photo'; //设置文件上传的参数名称
            editor.customConfig.uploadImgServer = '/forum/post/upload'; //设置上传文件的服务器路径
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
            //自定义上传图片事件
            editor.customConfig.uploadImgHooks = {
                before : function(xhr, editor, files) {

                },
                success : function(xhr, editor, result) {
                    console.log("上传成功");
                },
                fail : function(xhr, editor, result) {
                    console.log("上传失败,原因是"+result);
                },
                error : function(xhr, editor) {
                    console.log("上传出错");
                },
                timeout : function(xhr, editor) {
                    console.log("上传超时");
                }
            }


            editor.create()
            let eds = document.getElementsByClassName('w-e-text-container')
            eds[0].style = eds[0].style.cssText + 'height: 700px'
            $text1.val(editor.txt.html())

            // document.getElementById('btn1').addEventListener('click', function () {
            //     // 读取 html
            //     alert(editor.txt.html())
            // }, false)

            // document.getElementById('btn2').addEventListener('click', function () {
            //     // 读取 text
            //     alert(editor.txt.text())
            // }, false)
        </script>


        <div style="text-align: center;margin-top: 40px">
            <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" style="background-color: #3F91FF;color: white" onclick="submitInfo()">发布</button>
            <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" style="background-color: #3F91FF" onclick="fangfa()">离开此页</button>
            <script>
                function fangfa() {
                    // window.close();
                    // window.top.close();
                    if
                    (confirm("您确定要关闭本页吗？")){
                        window.opener=null;
                        window.open('','_self');
                        window.close();
                    }
                    else{}

                }
            </script>
        </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
<%--            <button type="submit" class="layui-btn" lay-submit="" lay-filter="" onclick="submitInfo()">立即提交</button>--%>
            <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
        </div>
    </div>
</form>
</div>

<script>
    function submitInfo() {

        var postName = $('#postName').val()
        if (postName == null){
            alert("帖子标题不能为空")
            return false;
        }
        // 获取选择框选中的内容
        var tag = $('#category option:selected').val();
        if (tag == 0){
            alert("帖子类型不能为空")
            return false
        }
        alert(tag)
        // 获取富文本编辑器中的文本内容
        var txt = editor.txt.text()
        // 判断内容是否超过100字符，超过截取到100，不超过就显示所有文本信息
        if (txt.length == 0){
            alert("帖子详情不能为空");
            return false;
        } else {
            if (txt.length > 100){
                // 截取其中的部分内容
                var txt = txt.substr(0,100);
                console.log(txt);
            }else {
                var txt = txt;
            }
        }
            // 获取用户的信息
            $.ajax({
                url: '/forum/user/getUserInfo',
                type:'get',
                dataType:'json',
                success: function (data) {
                    if( data.state === '200' ){
                        console.log(data.data);
                        console.log(data.data.userName);

                        var userName = data.data.userName;

                        var formData = new FormData();
                        // formData.append("photo", $('button[type="button"]').files[0])
                        formData.append("photo", $('input[type="file"]')[0].files[0])
                        var val = postName
                        formData.append("postName", val)
                        var val = tag
                        formData.append("postType", val)
                        // 获取富文本编辑器中的html代码
                        var val = editor.txt.html()
                        alert(editor.txt.html())
                        formData.append("postContent",val)
                        var val = userName
                        formData.append("userName",val)
                        var val = txt;
                        formData.append("other1",val)
                        // var val = $('#photo')

                        $.ajax(
                            {
                                url:"/forum/post/insertPostTest",
                                type:"post",
                                contentType:false,  // 告诉jquery不要设置Content-Type请求头
                                data:formData,
                                async:true,
                                processData: false,// 告诉jquery不要处理发送的数据
                                success:function (data) {
                                    // alert(data)
                                    if("success"== data){
                                        alert("添加成功")
                                        location.replace(location.href);
                                    }
                                }
                            })
                    }
                }
            })


    }
</script>
</body>


</html>
